<%--
  Created by IntelliJ IDEA.
  User: 13095
  Date: 2024/9/21
  Time: 15:56
  To change this template use File | Settings | File Templates.
--%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html; charset=UTF-8" language="java" pageEncoding="UTF-8" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<c:set value="${pageContext.request.contextPath}" var="path"></c:set>
<html>
<head>
    <meta charset="UTF-8">
    <title>用户注册</title>
    <link rel="stylesheet" href="${path}/static/css/login.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div class="container">
    <div class="card">
        <h1>用户注册</h1>
        <c:if test="${not empty param.error}">
            <div class="error">${param.error}</div>
        </c:if>
        <form action="${path}/user/register" method="post" id="registrationForm">
            <label>用户名:</label>
            <input type="text" name="username" required placeholder="请输入用户名" maxlength="15" id="usernameInput">
            <span id="usernameError" class="error"></span>

            <label>手机号:</label>
            <input type="text" name="phone_number" required placeholder="必填,请输入手机号" maxlength="15" id="phoneInput">
            <span id="phoneError" class="error"></span>

            <label>密码:</label>
            <input type="password" name="password" required placeholder="请输入密码" maxlength="255" id="passwordInput">
            <span id="passwordError" class="error"></span>

            <label>邮箱:</label>
            <input type="email" name="email" placeholder="可选，请输入邮箱" maxlength="100" id="emailInput">
            <span id="emailError" class="error"></span>

            <input type="submit" value="注册">
        </form>
        <div class="footer">
            <p>已有账号？ <a href="/user/login">登录</a></p>
        </div>
    </div>
</div>
<script>
    $(document).ready(function () {
        // 用户名验证
        $('#usernameInput').on('input', function () {
            var username = $(this).val();
            if (username.length < 3 || username.length > 15) {
                $('#usernameError').text('用户名长度应在 3 到 15 个字符之间');
            } else {
                $('#usernameError').text('');
            }
        });

        // 手机号验证
        $('#phoneInput').on('input', function () {
            var phoneNumber = $(this).val();
            var phoneRegex = /^1[3-9]\d{9}$/;
            if (!phoneRegex.test(phoneNumber)) {
                $('#phoneError').text('请输入有效的手机号码');
            } else {
                $('#phoneError').text('');
            }
        });

        // 密码验证
        $('#passwordInput').on('input', function () {
            var password = $(this).val();
            if (password.length < 6 || password.length > 20) {
                $('#passwordError').text('密码长度应在 6 到 20 个字符之间');
            } else {
                $('#passwordError').text('');
            }
        });

        // 邮箱验证
        $('#emailInput').on('input', function () {
            var email = $(this).val();
            var emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
            if (email!== '' &&!emailRegex.test(email)) {
                $('#emailError').text('请输入有效的邮箱地址');
            } else {
                $('#emailError').text('');
            }
        });

        // 表单提交验证
        $('#registrationForm').submit(function (e) {
            var usernameError = $('#usernameError').text();
            var phoneError = $('#phoneError').text();
            var passwordError = $('#passwordError').text();
            var emailError = $('#emailError').text();

            if (usernameError!== '' || phoneError!== '' || passwordError!== '' || emailError!== '') {
                e.preventDefault();
                return false;
            }
            return true;
        });
    });
</script>
</body>
</html>